<template>
  <view class="template-login">
    <!-- 顶部自定义导航 -->
    <nav-back/>

    <view class="login">
      <!-- 顶部背景图片-->
      <view class="login__bg login__bg--top">
        <!-- <image class="bg" src="https://tnuiimage.tnkjapp.com/login/1/login_top2.jpg" mode="widthFix"></image> -->
        <image class="bg" src="https://tnuiimage.tnkjapp.com/my/my-bg4.png" mode="widthFix"></image>
      </view>
      <view class="login__bg login__bg--top">
        <!-- <image class="rocket rocket-sussuspension" src="https://tnuiimage.tnkjapp.com/login/1/login_top3.png" mode="widthFix"></image> -->
      </view>

      <view class="login__wrapper">
        <!-- 登录/注册切换 -->
        <view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
            登录
          </view>
          <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
            注册
          </view>

          <!-- 滑块-->
          <view class="login__mode__slider" style="background-color: #1D2541" :style="[modeSliderStyle]"></view>
        </view>

        <!-- 输入框内容-->
        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
          <!-- 登录 -->
          <block v-if="currentModeIndex === 0">
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-phone"></view>
              </view>
              <view class="login__info__item__input__content">
                <input type="number" maxlength="20" placeholder-class="input-placeholder" v-model="loginInfo.phone" placeholder="请输入登录手机号码" />
              </view>
            </view>

            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-lock"></view>
              </view>
              <view class="login__info__item__input__content">
                <input :password="!showPassword" placeholder-class="input-placeholder" v-model="loginInfo.password" placeholder="请输入登录密码" />
              </view>
              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
              </view>
            </view>
          </block>
          <!-- 注册 -->
          <block v-if="currentModeIndex === 1">
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-phone"></view>
              </view>
              <view class="login__info__item__input__content">
                <input type="number" maxlength="20" placeholder-class="input-placeholder" v-model="registerParam.phone" placeholder="请输入注册手机号码" />
              </view>
            </view>

            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-code"></view>
              </view>
              <view class="login__info__item__input__content login__info__item__input__content--verify-code">
                <input type="number" placeholder-class="input-placeholder" v-model="registerParam.code"  placeholder="请输入验证码" />
              </view>
              <view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
                <tn-button backgroundColor="#1D2541" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
              </view>
            </view>

            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-lock"></view>
              </view>
              <view class="login__info__item__input__content">
                <input :password="!showPassword" v-model="registerParam.password" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
              </view>
              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
              </view>
            </view>
          </block>


          <view class="tn-flex login__info__item__button">
            <view class="tn-flex-1 justify-content-item tn-text-center">
              <tn-button :disabled="loading" :loading="loading" v-if="currentModeIndex === 0" shape="round" backgroundColor="#1D2541" padding="40rpx 0" width="100%" fontBold @click="login">
                <text class="tn-color-white" hover-class="tn-hover" :hover-stay-time="150">
                  登 录
                </text>
              </tn-button>
              <tn-button :disabled="loading" :loading="loading" v-if="currentModeIndex === 1" shape="round" backgroundColor="#1D2541" padding="40rpx 0" width="100%" fontBold @click="register">
                <text class="tn-color-white" hover-class="tn-hover" :hover-stay-time="150">
                  注 册
                </text>
              </tn-button>
            </view>
          </view>

          <view v-if="currentModeIndex === 0" class="login__info__item__tips" @click="tn('/pages/reset-password')">忘记密码?</view>
        </view>

        <!-- 其他登录方式 -->
        <view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
          <tn-button class="tn-padding-sm tn-margin-xs" backgroundColor="#F4F6FA">
            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
              <view class="tn-icon-wechat-fill"></view>
            </view>
          </tn-button>
        </view>
      </view>
    </view>

    <!-- 验证码倒计时 -->
    <tn-verification-code
        ref="code"
        uniqueKey="login-demo-1"
        :seconds="60"
        @change="codeChange">
    </tn-verification-code>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavBack from "@/components/nav-back";
import { login as loginApi } from "@/api/auth/auth";
import { findInfo, register as registerApi } from "@/api/system/self";
import { sendCode } from "@/api/system/sms";
import { setToken } from "@/utils/auth";

export default {
  name: 'Login',
  mixins: [template_page_mixin],
  components: {NavBack},
  data() {
    return {
      // 当前选中的模式
      currentModeIndex: 0,
      // 模式选中滑块
      modeSliderStyle: {
        left: 0
      },
      // 是否显示密码
      showPassword: false,
      // 倒计时提示文字
      tips: '获取验证码',
      loginInfo: {
        phone: '',
        password: ''
      },
      registerParam: {
        phone: '',
        code: '',
        password: '',
        agree: true
      },
      loading: false
    }
  },
  computed: {
    ...mapState(['vuex_user'])
  },
  watch: {
    currentModeIndex(value) {
      const sliderWidth = uni.upx2px(476 / 2)
      this.modeSliderStyle.left = `${sliderWidth * value}px`
    }
  },
  methods: {
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },
    // 切换模式
    modeSwitch(index) {
      this.currentModeIndex = index
      this.showPassword = false
    },
    // 获取验证码
    async getCode() {
      try {
        if(!this.$t.test.mobile(this.registerParam.phone)) {
          this.$t.message.toast('手机号格式不正确')
          return
        }
        uni.showLoading({title: '正在发送验证码'})
        await sendCode(this.registerParam.phone)
        uni.hideLoading()
        this.$t.message.toast('验证码已发送')
      } catch (e) {
        uni.hideLoading()
      }
    },
    // 获取验证码倒计时被修改
    codeChange(event) {
      this.tips = event
    },
    async login() {
      if(!/^(?:(?:\+|00)86)?1\d{10}$/.test(this.loginInfo.phone)) {
        this.$t.message.toast('手机号格式不正确')
        return
      }
      if (!this.loginInfo.password) {
        this.$t.message.toast('密码不能为空')
        return
      }

      this.loading = true
      try {
        const { data: token } = await loginApi({'mobile': this.loginInfo.phone, 'password': this.loginInfo.password})
        setToken(token)
        const { data: self } = await findInfo()
        this.$t.vuex('vuex_user', self)
		    this.goBack()
      } catch (e) {
        if (e?.errMsg) {
          this.$t.message.toast(e.errMsg)
        }
        this.loading = false
      } finally {
        this.loading = false
      }
    },
    async register() {
      if(!this.$t.test.mobile(this.registerParam.phone)) {
        this.$t.message.toast('手机号格式不正确')
        return
      }
      if (!this.$t.test.code(this.registerParam.code, 6)) {
        this.$t.message.toast('请输入六位验证码')
        return
      }
      // TODO 移动端没有做密码强度校验，正式项目建议校验
      this.loading = true
      try {
        await registerApi(this.registerParam)
        this.$t.message.toast('注册成功')
        this.currentModeIndex = 0;
      } catch (e) {
        this.$t.message.toast(e.message || e.errMsg)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}

/* 悬浮 */
.rocket-sussuspension{
  animation: suspension 3s ease-in-out infinite;
}

@keyframes suspension {
  0%, 100% {
    transform: translate(0 , 0);
  }
  50% {
    transform: translate(-0.8rem , 1rem);
  }
}

.login {
  position: relative;
  height: 100%;
  z-index: 1;

  /* 背景图片 start */
  &__bg {
    z-index: -1;
    position: fixed;

    &--top {
      top: 0;
      left: 0;
      right: 0;
      width: 100%;

      .bg {
        width: 750rpx;
        will-change: transform;
      }
      .rocket {
        margin: 50rpx 28%;
        width: 400rpx;
        will-change: transform;
      }
    }

    &--bottom {
      bottom: -10rpx;
      left: 0;
      right: 0;
      width: 100%;
      // height: 144px;
      // margin-bottom: env(safe-area-inset-bottom);

      image {
        width: 750rpx;
        will-change: transform;
      }
    }
  }
  /* 背景图片 end */

  /* 内容 start */
  &__wrapper {
    margin-top: 403rpx;
    width: 100%;
  }

  /* 切换 start */
  &__mode {
    position: relative;
    margin: 0 auto;
    width: 476rpx;
    height: 77rpx;
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
    border-radius: 39rpx;

    &__item {
      height: 77rpx;
      width: 100%;
      line-height: 77rpx;
      text-align: center;
      font-size: 31rpx;
      color: #78909C;
      letter-spacing: 1em;
      text-indent: 1em;
      z-index: 2;
      transition: all 0.4s;

      &--active {
        font-weight: bold;
        color: #FFFFFF;
      }
    }

    &__slider {
      position: absolute;
      height: inherit;
      width: calc(476rpx / 2);
      border-radius: inherit;
      box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
      z-index: 1;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
  }
  /* 切换 end */

  /* 登录注册信息 start */
  &__info {
    margin: 0 30rpx;
    margin-top: 105rpx;
    padding: 30rpx 51rpx;
    padding-bottom: 0;
    border-radius: 20rpx;
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);

    &__item {

      &__input {
        margin-top: 59rpx;
        width: 100%;
        height: 77rpx;
        border: 1rpx solid #C6D1D8;
        border-radius: 39rpx;

        &__left-icon {
          width: 10%;
          font-size: 44rpx;
          margin-left: 20rpx;
          color: #78909C;
        }

        &__content {
          width: 80%;
          padding-left: 10rpx;

          &--verify-code {
            width: 56%;
          }

          input {
            font-size: 30rpx;
            color: #78909C;
            // letter-spacing: 0.1em;
          }
        }

        &__right-icon {
          width: 10%;
          font-size: 44rpx;
          margin-right: 20rpx;
          color: #78909C;
        }

        &__right-verify-code {
          width: 34%;
          margin-right: 20rpx;
        }
      }

      &__button {
        margin-top: 75rpx;
        margin-bottom: 39rpx;
        width: 100%;
        letter-spacing: 0.5em;
      }

      &__tips {
        margin: 30rpx 0;
        color: #AAAAAA;
      }
    }
  }
  /* 登录注册信息 end */

  /* 登录方式切换 start */
  &__way {
    margin: 0 auto;
    margin-top: 110rpx;

    &__item {
      &--icon {
        width: 77rpx;
        height: 77rpx;
        font-size: 50rpx;
        border-radius: 100rpx;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
        }
      }
    }
  }
  /* 登录方式切换 end */
  /* 内容 end */

}

/deep/.input-placeholder {
  font-size: 30rpx;
  color: #C6D1D8;
}
</style>
